<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
    <link rel="stylesheet" href="css/1.css" />
    
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide one">
                 <div class="w1 ani" swiper-animate-effect="flipInX" swiper-animate-duration="0.2s" swiper-animate-delay="1s">
                 </div>
                 <div class="w2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.2s" swiper-animate-delay="1s"></div>
                  <div class="w7 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
                      生活与爱，浪漫与画，每天在花中醒来
                  </div>
                 <div class="w3 ani" swiper-animate-effect="  zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s"> </div>
                 <div class="w4 ani" swiper-animate-effect="  zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.2s"></div>
                 <div class="w5 ani" swiper-animate-effect="  zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s"></div>
                 <div class="w6"></div>
            </div>
            <div class="swiper-slide two">
                <div class="t1 ani" swiper-animate-effect="bounce" swiper-animate-duration="0.2s" swiper-animate-delay="1s"></div>
                <div class="t2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.2s" swiper-animate-delay="1s"></div>
                <div class="t2-1 ani" swiper-animate-effect="bounce" swiper-animate-duration="0.2s" swiper-animate-delay="1s">朵朵的小店</div>
                <div class="t2-2 ani" swiper-animate-effect="wobble" swiper-animate-duration="1s" swiper-animate-delay="1.2s"></div>
                <div class="t3 ani" swiper-animate-effect="flip" swiper-animate-duration="1s" swiper-animate-delay="1.2s"></div>
                <div class="t4 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.5s"></div>
                <div class="t5">
                    <span class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="1.1s" swiper-animate-delay="1.3s">消逝也罢。 </span>
                <span class="ani"swiper-animate-effect="rollIn"  swiper-animate-duration="1.1s" swiper-animate-delay="1.2">铭记也好，</span>
                    <span class="ani"swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="1.1s">没有终点。</span>
                    <span class="ani"swiper-animate-effect="rollIn" swiper-animate-duration="0.9s" swiper-animate-delay="1s">向着你的心，</span>
                    <span class="ani"swiper-animate-effect="rollIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.9s">这世界上的爱，</span>
                    <span class="ani"swiper-animate-effect="rollIn" swiper-animate-duration="0.7s" swiper-animate-delay="0.8s">那种子便是</span>
                    <span class="ani"swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.7s">一日花开，</span>
                </div>
                <div class="t7 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
                </div>
                <div class="t8 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s"></div>
                <div class="t9 ani" swiper-animate-effect="  zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s"></div>
                <div class="t10 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s"></div>
            </div>
            <div class="swiper-slide two">

             <div class="t1 ani" swiper-animate-effect="bounce" swiper-animate-duration="0.2s" swiper-animate-delay="1s"></div>
                <div class="t2 ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.2s"></div>
                <div class="t2-1">朵朵的小店</div>
                <div class="t2-2"></div>
                <div class="t3"></div>
                <div class="t4"></div>
                <div class="t5 ani" swiper-animate-effect="swing" swiper-animate-duration="1s" swiper-animate-delay="1.2s"> 
                    玫瑰花语:爱情、和平、友谊、勇气和献身精神的化身     在希腊神话中，玫瑰既是美神的化身，又溶进了爱神的鲜血，它集爱与美于一身，这在花的国度里，可是相当幸运的了。
                </div>
                <div class="t7 ani" swiper-animate-effect="tada" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
                </div>
                <div class="t8 ani" swiper-animate-effect="slideInUp" swiper-animate-duration="1s" swiper-animate-delay="1.2s"></div>
                <div class="t9 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.2s"></div>
                <div class="t10 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.2s"></div>
            </div>
            <div class="swiper-slide two">
           <div class="t1"></div>
                <div class="t2"></div>
                <div class="t2-1">朵朵的小店</div>
                <div class="t2-2"></div>
                <div class="t3"></div>
                <div class="t4"></div>
                <div class="t5">
                    <input type="text" name="姓名" class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.9s" swiper-animate-delay="1s">
            <input type="text" value="电话"  class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.4s"><br/><br/>
            <input type="text" value="地址"  class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.4s" swiper-animate-delay="0.5"><br/><br/>
            <input type="textarea" value="地址"  class="ani" swiper-animate-effect="  zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.2s"><br/><br/>
            <input type="submit" value="地址"  class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.9s" swiper-animate-delay="1s"><br/>
            </div>
                </div>
                <div class="t7">
                </div>
                <div class="t8"></div>
                <div class="t9"></div>
                <div class="t10"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate1.0.2.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素 
            swiperAnimate(swiper); //初始化完成开始动画
          }, 
        onSlideChangeEnd: function(swiper){ 
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
          } 
    });
    </script>
</body>
</html>